'use client'
import React, {PropsWithChildren, useEffect, useMemo,} from "react"
import {Button, Layout, Menu, notification, theme} from "antd";
import {
    LogoutOutlined,
    TeamOutlined, UnorderedListOutlined
} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import employeeAuthorizationStore from "../../store/AuthorizationStore";

import {useLocation, useNavigate} from "react-router-dom";
import {MenuItemType} from "antd/es/menu/interface";
import authorizationStore from "../../store/AuthorizationStore";

const DashboardLayout: React.FC<PropsWithChildren & {
    [key: string]: React.ReactNode
}> = ({children}) => {

    const [api, contextHolder] = notification.useNotification();
    useEffect(() => {
        if (!authorizationStore.hasLogIn){
            navigate("/logIn",{
                replace:true
            })
        }
    }, [authorizationStore.hasLogIn]);
    let navigate = useNavigate();


    const pathname = useLocation().pathname;
    const leftSideMenuItems: Array<MenuItemType & {
        children?: Array<MenuItemType>
    }> = [
        {
            icon: <UnorderedListOutlined />,
            key: "/orders",
            label: "订单",
            children: [
                {
                    key: "/homeApplianceOrders",
                    label: "家电",
                },
                {
                    key: "/digitalOrders",
                    label: "数码",
                },
            ]
        },
    ];

    let token = theme.useToken();

    const availableMenuItems = useMemo(() => {
        return leftSideMenuItems
    }, [ leftSideMenuItems])
    return (
        <>
            <>{contextHolder}</>
            <Layout style={{height: "100vh"}}>
                <Layout.Header style={{display: 'flex', alignItems: 'center'}}>
                    <h3 style={{color: token.token.colorWhite}}>国补管理工具</h3>
                    <div style={{flexGrow: 1}}></div>

                    <Button type={"link"}
                            onClick={async () => {
                                return employeeAuthorizationStore.logOut();
                            }}><LogoutOutlined/>退出</Button>
                </Layout.Header>
                <Layout>
                    <Layout.Sider width={200} style={{overflowY: "auto"}}>
                        <Menu
                            defaultOpenKeys={availableMenuItems.filter(it => pathname.startsWith(it.key as string)).map(it => it.key as string)}
                            mode={"inline"}
                            selectedKeys={availableMenuItems.flatMap(it => [it, ...(it.children ?? [])]).map(it => it.key as string).filter(it => {
                                return pathname == it
                            })}
                            style={{borderRight: 0, minHeight: "100%"}}
                            items={availableMenuItems}
                            onSelect={item => {
                                navigate(item.key);
                            }}
                        />
                    </Layout.Sider>
                    <Layout.Content
                        style={{
                            margin: 0,
                            overflowY: "hidden",
                        }}
                    >
                        {children}
                    </Layout.Content>
                </Layout>
            </Layout>

        </>
    )
}

export default observer(DashboardLayout)